<template>
  <div class="margin-Margin">
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <div slot="header">
        <Employeesummary>
          <template #left>
            <span>本月:{{ total }}位员工</span>
          </template>
          <template #right>
            <el-button type="warning">导入</el-button>
            <el-button type="danger">导出</el-button>
            <el-button type="primary" @click="showadd">新增员工</el-button>
          </template>
        </Employeesummary>
        <!-- 全局引入的 -->
        <!-- <PageTools /> -->
      </div>
      <!-- table列表 -->
      <el-table border :data="list">
        <el-table-column type="index" label="序号" />
        <el-table-column prop="username" label="姓名" />
        <el-table-column prop="workNumber" label="工号" />
        <el-table-column prop="formOfEmployment" label="聘用形式" />
        <el-table-column prop="departmentName" label="部门" />
        <el-table-column prop="timeOfEntry" label="入职时间" />
        <el-table-column label="账户状态" />
        <el-table-column label="操作" fixed="right" width="280">
          <template #default="{row}">
            <el-button type="text" size="small">查看</el-button>
            <el-button type="text" size="small">分配角色</el-button>
            <el-button type="text" size="small" @click="delFn(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <el-row
        type="flex"
        justify="center"
        align="middle"
        style="height: 60px"
      >
        <el-pagination
          layout="prev, pager, next,sizes"
          :page-sizes="[2,5,10]"
          :page-size="paging.size"
          :total="total"
          @current-change="changecurrent"
          @size-change="changesize"
        />
      </el-row>
    </el-card>
    <addyuang :show-dialog="showDialog" @close="closeFn" />
  </div>

</template>

<script>
import addyuang from './add-yuangongguanli.vue'
import { yuangonglist, delshan } from '@/api/yuangongguanli'
import Employeesummary from '@/components/PageTools/index.vue'
export default {
  components: {
    Employeesummary,
    addyuang
  },
  data() {
    return {
      // 弹窗显示状态
      showDialog: false,
      // 员工列表
      list: [],
      // 获取某页数据
      paging: {
        page: 1, // 页码
        size: 2// 每页数据条数
      },
      // 总条数
      total: 0
    }
  },
  created() {
    // 获取数据
    this.gitlistinformation()
  },
  methods: {
    // 点击删除
    async delFn(id) {
      await delshan(id)
      // 重新获取数据
      this.gitlistinformation()
    },
    // 获取列表信息
    async gitlistinformation() {
      const res = await yuangonglist(this.paging)
      this.list = res.rows
      this.total = res.total
      console.log(res)
    },
    // 改变当前页时触发
    changecurrent(val) {
      this.paging.page = val
      // 重新获取数据
      this.gitlistinformation()
    },
    // 条数改变时触发
    changesize(val) {
      this.paging.size = val
      // 重新获取数据
      this.gitlistinformation()
    },
    // 点击新增
    showadd() {
      // 显示弹窗
      this.showDialog = true
    },
    // 关闭弹窗
    closeFn() {
      // 显示弹窗
      this.showDialog = false
      // 重新获取数据
      this.gitlistinformation()
    }
  }

}
</script>

<style lang='scss' scoped>

</style>
